Handling Forms in React using Hooks

您所在的位置：网站首页 › react hooks form › Handling Forms in React using Hooks

Handling Forms in React using Hooks

#Handling Forms in React using Hooks | 来源: 网络整理| 查看: 265

In this tutorial, we are going to learn about how to handle the forms in react apps by using hooks.

Forms

Forms allow us to accept the data from the users and sent to the server for processing. They are a different type of forms such as Login, Register and Contact, etc.

In HTML5 we have form elements like input,textarea, select they maintain there own internal state in the dom but in react we maintain the form elements state inside the component so that we can have full control over the form elements.

What is Form handling

Form handling means how we handle the form data when a user changes the value or submits the form.

Let’s see an example of how we handle the input element data with react hooks.

import React,{useState} from 'react'; function Form(){ const [name,setName] = useState(''); function handleNameChange(e){ setName(e.targe.value) } function handleSubmit(e){ e.preventDefault() // stops default reloading behaviour console.log(name); } return ( Submit ) }

In the above code, we have set the value attribute of an input element to name property and onChange event handler method handleNameChange runs on every time we enter some data in the input element,and it updates the name property by using setName method, so that we keep sync the value with react state (name property).

handleSubmit method is used to submit the form.

select element

element helps us to create a drop-down list, let’s see an example of how to create a drop-down list and handle the data.

import React,{useState} from 'react'; function FormSelect() { //initial value set to react const [framework,setFramework] = useState('react'); function handleChange(e){ setFramework(e.target.value); }; function handleSubmit(e){ e.preventDefault(); console.log(framework); }; return ( Choose your framework React Angular Vue Submit ); }

Here we created a dropdown list of frameworks in element we set value attribute to framework property and onChange event handler is added.

The nested elements contain a value attribute which is holding the data so that whenever we select a particular option handleChange method is invoked and changes the framework property value with the attribute value.

Have you seen the select element also follows the similar pattern like input element so that why can’t we create a custom react hook and reuse it on every form element?

Creating custom hooks import React,{useState} from 'react'; function useInput(initialValue){ const [value,setValue] = useState(initialValue); function handleChange(e){ setValue(e.target.value); } return [value,handleChange]; }

Here we created a custom hook called useInput let’s use it now.

Using custom useInput() hook function LoginForm(){ const [email,setEmail] = useInput('');const [password,setPassword] = useInput(''); function handleSubmit(e){ e.preventDefault(); console.log(email,password) } return( Submit ) }

Now our LoginForm component looks much cleaner by using a useInput() custom hook.

similarly we can use our useInput hook with other form elements.

Radio buttons example function RadioButtons() { const [data] = useState({male:"male",female:"female",other:"other"}) const [gender, setGender] = useInput(""); function handleSubmit(e) { e.preventDefault(); console.log(gender); } return ( Select Your Gender Male Female Other submit ) } Textarea element example function Comments(){ const [comment,setComment] = useInput(""); function handleSubmit(e) { e.preventDefault(); console.log(comment); } return( submit ) }

【本文地址】

Handling Forms in React using Hooks

Handling Forms in React using Hooks

今日新闻

推荐新闻